use crate::components::UiLanguageSelector;
use leptos::prelude::*;

/// Account Component
/// Displays account information in the top right corner
#[component]
#[must_use]
pub fn UiAccount(
    #[prop(optional)] class: Option<String>,
    user_name: String,
    language: Signal<String>,
    on_logout: Option<Callback<()>>,
    on_language_change: Callback<String>,
) -> impl IntoView {
    let handle_logout = move |_| {
        if let Some(cb) = on_logout {
            cb.run(());
        }
    };

    let base = "flex items-center justify-end space-x-4";
    let class = class.map_or_else(|| base.to_string(), |c| format!("{base} {c}"));

    view! {
        <div class=class>
            <UiLanguageSelector
                current_language=language
                on_language_change=on_language_change
            />
            <div class="flex items-center space-x-3">
                <span class="text-gray-200 font-medium text-sm">
                    {format!("欢迎, {user_name}!")}
                </span>
                <button
                    class="px-3 py-1.5 text-xs font-medium text-white bg-red-600/80 rounded-md hover:bg-red-700/80 focus:outline-none focus:ring-2 focus:ring-red-500 transition"
                    on:click=handle_logout
                >
                    "退出"
                </button>
            </div>
        </div>
    }
}
